<template>
  <div class="dictManage">
    <up-down-layout :header="'数据字典管理'" :handleFlag="true" >
      <template slot="query">
        <search-form :componentList="componentList" :formValue="queryParas" @handleFilter="handleFilter"
          @clearParam="clearParam">
        </search-form>
      </template>
      <template slot="table">
        <!-- table表格 -->
        <data-table :toolMenuFlag="true" :sourceData="sourceData" :queryParas="queryParas"
          :menuFlag="false" :IsRight="false" @onEditRow="onEditRow" @onCreateRow="addData"
          :operateBtnLayout="operateBtnLayout" :operatWidth="'180px'" :columns="columns" :deleteApi="api" :api="api" :loadCount="loadCount"
          >
          <template slot="index">
            <el-table-column align="center" prop="label" label="字典名称" width="110px">
               <template slot-scope="scope">
                 <span class="alink">{{ scope.row.label }}</span>
               </template>
            </el-table-column>
            <el-table-column align="center" prop="type" label="字典类型" width="130px">
               <template slot-scope="scope">
                 <span class="alink" @click="typeDetails(scope.row)">{{ scope.row.type }}</span>
               </template>
            </el-table-column>
          </template>
        </data-table>
      </template>
    </up-down-layout>
    <!-- 新增字典 -->
    <addDict :editModel="editModel" :visible.sync="dialogVisible" :api="api" :form="item" @handSearch="handleFilter"/>
        <!-- 文件夹管理 -->
    <el-drawer
      title=""
      :visible.sync="drawer"
      size="80%" class="file-drawer"
      direction='btt'
      :with-header="true">
      <!-- 体系文件目录-->
      <dictDataManage :bizType="bizType" class="file-content" ></dictDataManage>
    </el-drawer>
  </div>
</template>

<script>
  import BaseManage from '@/pages/baseManage'
  import upDownLayout from '@/components/element/upDownLayout'
  import searchForm from '@/components/element/searchForm'
  import DataTable from '@/components/element/DataTable'
  import { sysDict } from '@/api/platformApi'
  import { formatDict } from '@/filters/index'
  // 字典新增页面
  import dictDataManage from '@/pages/systemManage/dictManage/dictDataManage'
  import addDict from '@/pages/systemManage/dictManage/addDict'
  export default {
    // 继承baseManage里的公共方法和定义的属性
    extends: new BaseManage(),
    name: 'dictManage',
    components: {
      upDownLayout,
      searchForm,
      DataTable,
      dictDataManage,
      addDict
    },
    data () {
      return {
        bizType: '',
        drawer: false,
        // 需要显示的每一项定义在这里
        componentList: [
          {
            prop: 'label',
            componentName: 'el-input',
            label: '字典名称：',
            lableWidth: '100px',
            value: 'label'
          },
          {
            prop: 'type',
            componentName: 'BaseSelect',
            label: '字典类型：',
            lableWidth: '100px',
            options: [],
            value: 'type'
          }
        ],
        // 选择查询区域的字段对象
        // queryParas: {
        //   label: '',
        //   type: ''
        // },
        // table的数据源
        // talbe显示的每一项
        columns: [
          {
            prop: 'updateBy',
            label: '修改人',
            align: 'center'
          },
          {
            prop: 'updateTime',
            label: '修改时间',
            align: 'center'
          },
          {
            prop: 'useable',
            label: '状态',
            align: 'center',
            format: row => { return formatDict(row.useable, 'useable') }
          },
          {
            prop: 'remarks',
            label: '备注',
            align: 'center'
          }
          // {
          //   prop: 'status',
          //   label: '审核状态',
          //   align: 'center',
          //   format: row => { return formatDict(row.status, 'ZD0032') }
          // }
        ],
        // 操作列需要显示的按钮
        operateBtnLayout: 'C,E,V,D'
      }
    },
    computed: {
      api () {
        return sysDict
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        sysDict.dictSelect().then(res => {
          let datas = this.componentList
          for (let d in datas) {
            if (datas[d].prop === 'type') {
              datas[d].options = res.data
            }
          }
        })
      },
      // 点击表格操作项的按钮
      onEditRow (rowIndex, rowData, clickType) {
        // 删除后查询一次
        if (clickType === 'D') {
          this.handleFilter()
          return this.$store.dispatch('GetDictionarys', 'reload')
        }
        this.editModel = clickType
        this.dialogVisible = true
        // 查看详情
        if (clickType === 'V') {
          this.item = rowData
        } else if (clickType === 'E') {
          // 编辑数据
          this.item = JSON.parse(JSON.stringify(rowData))
        }
      },
      // 查看当前字典类型的数据
      typeDetails (row) {
        this.bizType = row.type
        // sessionStorage.setItem('dictType', row.type)
        // this.$router.push({name: 'dictDataManage'})
        this.drawer = true
      }
    }
  }
</script>
<style>
  .dictManage .alink{
    color: #409EFF;
    cursor: pointer;
  }
</style>
<style lang="scss" scope>
  .file-drawer .el-drawer__header {
    margin-bottom: 10px;
    background: rgb(248, 248, 248);
  }
  .file-content {
    margin: 0 20px 0 15px;
  }
  .v-modal {
    z-index: 2000!important;
  }
</style>
